<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>bpmn</title>
  <script src="./antvx6.js"></script>
  <script src="./layout.min.js"></script>
</head>

<body>
  <div id="container"></div>
  <script>
    window.onload = function () {
      const data = {
        nodes: [
          {
            id: 'node1',
            x: 40,
            y: 40,
            width: 80,
            height: 40,
            label: 'hello',
          },
          {
            id: 'node2',
            x: 160,
            y: 180,
            width: 80,
            height: 40,
            label: 'world',
          },
        ],
        edges: [
          {
            source: 'node1',
            target: 'node2',
          },
        ],
      };

      const graph = new X6.Graph({
        container: document.getElementById('container'),
        width: 800,
        height: 600,
      });

      graph.fromJSON(data);

      // 添加新节点
      const newNode = graph.addNode({
        shape: 'rect',
        width: 100,
        height: 50,
        x: 300,
        y: 200,
        label: 'new node',
      });

      // 更新节点属性
      graph.updateNode(newNode, {
        width: 120,
        height: 60,
        label: 'updated node',
      });
    };
  </script>
</body>

</html>